<template>
  <div id="container"></div>
</template>
<script setup>
import { Graph } from "@antv/x6";
import { onMounted } from "vue";
import Group from "@/utils/Group.js";
import { createTimeLine } from "@/utils/datepicker.js";
import { drawGraph, addParent, addLines } from "@/utils/graph.js";
const props = defineProps(["tableData", "treeData", "lineData"]);

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById("container"),
    width: 1600,
    height: 1000,
    panning: true,
    grid: {
      size: 20,
      visible: true,
      type: "dot",
      args: {
        color: "black", // 网格线/点颜色
        thickness: 1, // 网格线宽度/网格点大小
      },
    },
    translating: {
      restrict(view) {
        const cell = view.cell;
        console.log(cell);
        if (cell.store.data.isGroup) {
          return cell.getBBox();
        }
        if (cell.store.data.isDate) {
          return cell.getBBox();
        }
        if (cell.isNode()) {
          const parent = cell.getParent();
          if (parent) {
            return parent.getBBox();
          }
        }

        return null;
      },
    },
    mousewheel: {
      enabled: true,
      modifiers: ["ctrl", "meta"],
    },
  });
  createTimeLine(graph);

  // const data = props.treeData[0];
  // const arr = [];
  // arr.push(data);
  drawGraph(graph, props.treeData);
  addParent(graph, props.tableData);
  addLines(graph, props.lineData);
  const initNodes = graph.getNodes().map((item) => {
    return { id: item.id, ...item.position() };
  });
  // graph.on("node:collapse", ({ node }) => {
  //   node.toggleCollapse();
  //   const collapsed = node.isCollapsed();
  //   const collapse = (parent) => {
  //     const cells = parent.getChildren();
  //     const nodes = node.getChildren().filter((item) => {
  //       if (item.isNode() && !item.store.data.isGroup) return item;
  //     });
  //     console.log("a",cells);
  //     console.log("b",nodes);
  //     if (cells) {
  //       cells.forEach((cell) => {
  //         if (collapsed) {
  //           cell.hide();
  //         } else {
  //           cell.show();
  //         }
  //         if (cell instanceof Group) {
  //           if (!cell.isCollapsed()) {
  //             collapse(cell);
  //           }else{
  //             cell.getChildren().forEach((it)=>{
  //               it.hide()
  //             })
  //           }
  //         }
  //         if (nodes.length != 0) {
  //           let length = nodes.length;
  //           const twoArr = initNodes.filter((item) => {
  //             return (
  //               item.id === nodes[0].id || item.id === nodes[length - 1].id
  //             );
  //           });
  //           const { width, height } = nodes[0].getParent().size();
  //           const { x, y } = nodes[0].getParent().position();
  //           if (collapsed) {
  //             console.log(nodes[0]);
  //             nodes[0].position(twoArr[0].x, y + height / 2 - 10);
  //             nodes[length - 1].position(twoArr[1].x, y + height / 2 - 10);
  //             nodes[0].show();
  //             nodes[length - 1].show();
  //             console.log("aa");
  //             graph.addEdge({
  //               id: `${nodes[0]}--${nodes[length - 1]}`,
  //               source: nodes[0],
  //               target: nodes[length - 1],
  //             });
  //           } else {
  //             console.log("qq", nodes[0].getParent());
  //             nodes[0].position(twoArr[0].x, twoArr[0].y);
  //             nodes[length - 1].position(twoArr[1].x, twoArr[1].y);
  //             nodes[0].show();
  //             nodes[length - 1].show();
  //             graph.removeEdge(`${nodes[0]}--${nodes[length - 1]}`);
  //           }
  //         }
  //       });
  //     }
  //   };

  //   collapse(node);
  // });
});
</script>
<style scoped>
.container {
  height: 100vh;
  width: 100%;
}
</style>
